@import 'var.less';
.nav{
    height: 100%;
    display: inline-block; 
    vertical-align: top;
    >ul{
        height: 100%;
        >li{
            display: inline-block;
            width:196px;
            height: 100%;
            position: relative;
            margin-left:-45px;
            .mainnav{
                cursor: pointer;
                color: white;
                position: absolute;
                top:0;
                left: 0;
                width:100%;
                height: 100%;
                img{
                    width:100%;
                    height: 100%;
                }
                .text{
                    position: absolute;
                    right:62px;
                    top:25px;
                    font-family: SourceHanSansCN-Light;
                    font-size: 15px;
                }
            }
            .dialog{
                width: @w_width;
                background-color: rgba(35, 92, 149,.92);
                box-shadow: -0.3px 4px 27px 0px 
                    rgba(143, 166, 189, 0.25);
                position: fixed;
                top:70px;
                left: calc(~"50% - 640px");
                margin:auto;
                z-index: 999;
                .column{
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: flex-start;
                    .subnav{
                        text-align: left;
                        width:220px;
                        height: 100%;
                        padding:25px 40px;
                        display: inline-block;
                        // vertical-align: top;
                        border-right: 1px solid rgba(255,255, 255,.12);
                        .title{
                            font-family: SourceHanSansCN-Medium;
                            font-size: 14px;
                            color: #ffffff;
                            position: relative;
                        }
                        .title:after{
                            content:'';
                            position: absolute;
                            left: 0;
                            bottom: -9px;
                            height: 1px;
                            width: 100%;
                            background-color: white;
                            opacity: 0.16;
                        }
                        ul{
                            margin-top:20px;
                            li{
                                cursor: pointer;
                                font-family: SourceHanSansCN-Normal;
                                font-size: 14px;
                                line-height: 35px; 
                                color: #cde6ff;
                                list-style-type:none;
                                .dot{
                                    display: inline-block;
                                    width: 10px;
                                    height: 10px;
                                    border: solid 1px #cde6ff;
                                    border-radius: 50%;
                                    position: relative;
                                    margin-right: 8px;
                                }
                                .dot:after{
                                    content: "";
                                    display: inline-block;
                                    width:4px;
                                    height: 4px;
                                    border: solid 1px #cde6ff; 
                                    border-radius: 50%;
                                    position: absolute;
                                    top:1px;
                                    left: 1px;
                                }
                                .text{
                                    position: relative;
                                }
                            }
                            .selected,.hover{
                                color: #ffffff;
                                .dot{
                                    border-color: white;
                                }
                                .dot:after{
                                    border-color: white;
                                }
                                .text:after{
                                    content: "";
                                    height: 2px;
                                    background-color: #ffffff;
                                    width:100%;
                                    position: absolute;
                                    bottom: -5px;
                                    left: 0;
                                }
                            }
                        }
                    }
                    .subnav:last-child{
                        border:0;
                    }
                    .subnav:hover{
                        background-color: #255c93;
                    }
                }
            }
        }
        >li:first-child{
            margin-left:0;
        }
    }
}